<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header @addTodo="addTodo" />

      <List :todoList="todoList" />

      <Footer />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
//引入组件就会自动注册
import Header from './views/header/index.vue';
import List from './views/list/index.vue';
import Footer from './views/footer/index.vue';
//引入类型建议加上type 方便确定功能
import type { TodoList } from './types';

//代办事项
const todoList = ref<TodoList>([{ id: 1, title: '睡觉', isDone: false }]);

//添加todo
const addTodo = (title: string) => {
  todoList.value.push({
    id: Date.now(),
    title,
    isDone: false,
  });
};
</script>

<style scoped>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
